<template>
  <div class="g3">
    <div v-if="compId && compId!=='noData'" class="ks-row-middle mb20 lh1">
      <span style="width: 60px">类型：</span>
      <el-radio-group v-model="selectType">
        <el-radio :label="true">选中</el-radio>
        <el-radio :label="false">取消选中</el-radio>
      </el-radio-group>
    </div>
    <div class="ks-row-middle mb20 lh1">
      <span style="width: 60px">组件</span>
      <el-select
        v-if="compId && compId!=='noData'"
        v-model="compId"
        filterable
        style="width: 100%"
      >
        <el-option
          v-for="com in list"
          :key="com.key"
          :value="com.key"
          :label="com.name + '（' +com.key + '）'"
        />
      </el-select>
      <span v-else>没有数据</span>
    </div>
    <template v-if="compId && compId!=='noData'">
      <div class="ks-row-middle mb20 lh1">
        唯一标识： {{ compId }}
      </div>
      <div class="mb20 lh1">参数（行数据的唯一标志key）</div>
      <div class="ks-row-middle mb20 lh1">
        <el-input
          v-model="selectKey"
          style="width: 100%"
        />
      </div>
      <el-divider>模型信息</el-divider>
      <div class="mb10 g3">模型名称</div>
      <div class="ell mb20">{{ modelName }}</div>
      <div class="mb10 ">模型编码</div>
      <div class="ell">{{ getModelCode() }}</div>
    </template>

  </div>
</template>

<script>

import { getHmmodelList } from '@/apis/paas/HmModelController.js'
import { getAllTableList, getAllReloadComponent } from '../../../utils/component'
export default {
  name: 'TableSetSelect',
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    workspace: {}
  },
  components: { },
  computed: {
    compId: {
      get () {
        const blockComponentId = this.block?.getFieldValue('Component')
        return blockComponentId || ''
      },
      set (val) {
        this.block.setFieldValue(val, 'Component')
        this.getModelCode()
      }
    },
    selectType: {
      get () {
        const selectType = this.block?.getFieldValue('SELECT_TYPE')
        return selectType === '选中'
      },
      set (val) {
        const text = val ? '选中' : '取消选中'
        this.block.setFieldValue(text, 'SELECT_TYPE')
      }
    },
    selectKey: {
      get () {
        const selectKey = this.block?.getFieldValue('SELECT_KEY')
        return selectKey || ''
      },
      set (val) {
        this.block.setFieldValue(val, 'SELECT_KEY')
      }
    }
  },
  data () {
    return {
      formData: {},
      modelList: [], // 所有业务模型的list
      list: [], // 组件列表
      modelName: '' // 模型名称
    }
  },
  watch: {
    'block': {
      handler () {
        this.getBlockData()
      },
      immediate: true
    }
  },
  methods: {
    getBlockData () {
      this.list = getAllTableList() || []
      if (!this.list.length) return
      const blockComponentId = this.block?.getFieldValue('Component')
      if (blockComponentId) {
        this.compId = blockComponentId
      }
    },
    getModelCode () {
      const res = this.list.find(item => item.key === this.compId)
      const modelCode = res?.__config?.modelCode
      modelCode ? this.getModelName(modelCode) : this.modelName = ''
      return modelCode || ''
    },
    async getModelName (modelCode) {
      const models = await getHmmodelList()
      const res = models.find(item => item.code === modelCode)
      this.modelName = res?.name
    }
  }
}
</script>

<style scoped>

</style>
